<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

       div{
            margin: 10px;
            padding: 5px;
        }
       /*     overflow: scroll;溢出时形成滚动条

       */
       #father{
           border: 2px solid #171515;
           /*height: 800px;*/
           /*overflow: hidden;*/

       }
       /*解决父级塌陷的方法  弗雷添加一个伪类after和手动添加一个空div一样*/
       #father:after{
           content:"";
           display: block;
           clear: both;
       }


       .lay01{

            border: 1px solid red ;
            display: inline-block;
            float: right;
        }
        .lay02{

            border: 1px solid red ;
            display: inline-block;
            float: left;
        }
        .lay03{

            border: 1px solid red ;
            display: inline-block;
            float: left;
        }
        /*clear:right   右侧不允许有浮动（清楚右侧的浮动）
        clear:both  两侧不允许有浮动
        */
        .lay04{

            border: 1px solid red ;
            display: inline-block;
            float: right;
            /*clear:both;*/
        }

    </style>
</head>
<body>
<div id="father">
    <div class="lay01"><img src="imgs/1.jpg" alt="" width="250px" height="310px"></div>
    <div class="lay02"><img src="imgs/2.jpg" alt="" width="350px" height="210px"></div>
    <div class="lay03"><img src="imgs/33.jpg" alt="" width="170px" height="100px"></div>
    <div class="lay04">jfdhggjkhtrsijkjjkclvxgjlkxdf</div>

</div>

</body>
</html>